<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Search | Select2 - The jQuery replacement for select boxes</title>
	<meta name="generator" content="GravCMS" />
	<meta name="description" content="Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results." />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" type="text/css" rel="stylesheet" />
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js" type="text/javascript" ></script>
	<select class="js-source-states">
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
		<optgroup label="Pacific Time Zone">
			<option value="CA">California</option>
			<option value="NV">Nevada</option>
			<option value="OR">Oregon</option>
			<option value="WA">Washington</option>
		</optgroup>
		<optgroup label="Mountain Time Zone">
			<option value="AZ">Arizona</option>
			<option value="CO">Colorado</option>
			<option value="ID">Idaho</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NM">New Mexico</option>
			<option value="ND">North Dakota</option>
			<option value="UT">Utah</option>
			<option value="WY">Wyoming</option>
		</optgroup>
		<optgroup label="Central Time Zone">
			<option value="AL">Alabama</option>
			<option value="AR">Arkansas</option>
			<option value="IL">Illinois</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="OK">Oklahoma</option>
			<option value="SD">South Dakota</option>
			<option value="TX">Texas</option>
			<option value="TN">Tennessee</option>
			<option value="WI">Wisconsin</option>
		</optgroup>
		<optgroup label="Eastern Time Zone">
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="IN">Indiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="OH">Ohio</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WV">West Virginia</option>
		</optgroup>
	</select>
	<script type="text/javascript">
		$(document).ready(function() {
			// Initialize "states" example
			var $states = $(".js-source-states");
			var statesOptions = $states.html();
			$states.remove();
			$(".js-states").append(statesOptions);
		});
	</script>
</head>
<body class="searchbox-hidden " style="margin: 20px 20px 20px 20px;">
<section id="body">
	<div class="padding highlightable">
		<div id="body-inner">
			<h2>Customizing how results are matched</h2>
			<h3>Matching grouped options</h3>
			<p>Only first-level objects will be passed in to the <code>matcher</code> callback.  If you are working with nested data, you must iterate through the <code>children</code> array and match them individually.  This allows for more advanced matching when working with nested objects, allowing you to handle them however you want.</p>
			<p>This example matches results only if the term appears in the beginning of the string:</p>
			<div class="s2-example">
				<select class="js-example-matcher-start js-states form-control"></select>
			</div>
			<pre data-fill-from=".js-code-example-matcher"></pre>
			<script type="text/javascript" class="js-code-example-matcher">
				function matchStart(params, data) {
					// If there are no search terms, return all of the data
					if ($.trim(params.term) === '') {
						return data;
					}
					// Skip if there is no 'children' property
					if (typeof data.children === 'undefined') {
						return null;
					}
					// `data.children` contains the actual options that we are matching against
					var filteredChildren = [];
					$.each(data.children, function (idx, child) {
						if (child.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
							filteredChildren.push(child);
						}
					});
					// If we matched any of the timezone group's children, then set the matched children on the group
					// and return the group object
					if (filteredChildren.length) {
						var modifiedData = $.extend({}, data, true);
						modifiedData.children = filteredChildren;
						// You can return modified objects from here
						// This includes matching the `children` how you want in nested data sets
						return modifiedData;
					}
					// Return `null` if the term should not be displayed
					return null;
				}
				$(".js-example-matcher-start").select2({
					matcher: matchStart
				});
			</script>
			<h2>Minimum search term length</h2>
			<p>Sometimes when working with large data sets, it is more efficient to start filtering the results only when the search term is a certain length. This is very common when working with remote data sets, as it allows for only significant search terms to be used.</p>
			<p>You may set a minimum search term length  by using the <code>minimumInputLength</code> option:</p>
			<pre><code>$('select').select2({
  minimumInputLength: 3 // only start searching when the user has input 3 or more characters
});</code></pre>
			<h2>Maximum search term length</h2>
			<p>In some cases, search terms need to be limited to a certain range. Select2 allows you to limit the length of the search term such that it does not exceed a certain length.</p>
			<p>You may limit the maximum length of search terms by using the <code>maximumInputLength</code> option:</p>
			<pre><code>$('select').select2({
    maximumInputLength: 20 // only allow terms up to 20 characters long
});</code></pre>
			<h2>Limiting display of the search box to large result sets</h2>
			<p>The <code>minimumResultsForSearch</code> option determines the minimum number of results required in the initial population of the dropdown to display the search box.</p>
			<p>This option is useful for cases where local data is used with a small result set, and the search box would simply be a waste of screen real estate. Set this value to -1 to permanently hide the search box.</p>
			<pre><code>$('select').select2({
    minimumResultsForSearch: 20 // at least 20 results must be displayed
});</code></pre>
			<h2>Hiding the search box</h2>
			<h3>Single select</h3>
			<p>For single selects, Select2 allows you to hide the search box using the <code>minimumResultsForSearch</code> configuration option. In this example, we use the value <code>Infinity</code> to tell Select2 to never display the search box.</p>
			<div class="s2-example">
				<select id="js-example-basic-hide-search" class="js-states form-control"></select>
			</div>
			<pre data-fill-from="#js-code-example-basic-hide-search"></pre>
			<script type="text/javascript" id="js-code-example-basic-hide-search">
				$("#js-example-basic-hide-search").select2({
					minimumResultsForSearch: Infinity
				});
			</script>
			<h3>Multi-select</h3>
			<p>For multi-select boxes, there is no distinct search control. So, to disable search for multi-select boxes, you will need to set the <code>disabled</code> property to true whenever the dropdown is opened or closed:</p>
			<div class="s2-example">
				<select id="js-example-basic-hide-search-multi" class="js-states form-control" multiple="multiple"></select>
			</div>
			<pre data-fill-from="#js-code-example-basic-hide-search-multi"></pre>
			<script type="text/javascript" id="js-code-example-basic-hide-search-multi">
				$('#js-example-basic-hide-search-multi').select2();
				$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
					var $searchfield = $(this).parent().find('.select2-search__field');
					$searchfield.prop('disabled', true);
				});
			</script>
			</p>
		</div>
	</div>
</section>
</body>
</html>